<template>
    <section>
        <!--工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :model="keyword" :inline="true">
                <el-form-item>
                    <el-input v-model="keyword" placeholder="关键字"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="warning" v-on:click="getTableData">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="addHandler">新增</el-button>
                </el-form-item>
                <el-form-item>
                    <el-link href="http://127.0.0.1:8080/course/export">
                        <el-button type="success" @click="exportCourseFile">导出</el-button>
                    </el-link>
                </el-form-item>
                <el-form-item>
                    <!-- @click="importCourseFile" -->
                    <el-button type="success" @click="dialogFormVisible = true">点击导入</el-button>
                </el-form-item>
            </el-form>
        </el-col>

        <!-- 上传框 -->
        <el-dialog title="导入" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-upload class="upload-demo" action="http://localhost:8080/course/importExcel" :on-change="handleChange"
                    :file-list="fileList">
                    <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <!-- 下载模板 -->
                <el-link href="http://localhost:8080/course/importTemplate">
                    <el-button type="success">下载模板</el-button>
                </el-link>
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="importSuccess">确 定</el-button>
            </div>
        </el-dialog>

        <!--列表v-loading="listLoading"-->
        <el-table border :data="tableDatas" v-loading="listLoading" @selection-change="handleSelectionChange"
            highlight-current-row style="width: 100%;" :row-key="getRowKey">
            <!--多选框-->
            <el-table-column reserve-selection type="selection" width="55"></el-table-column>
            <el-table-column type="index" width="70" label="序号"></el-table-column>
            <el-table-column prop="lectureTime" label="日期" width="120"></el-table-column>
            <el-table-column prop="week" label="星期" width="150" sortable></el-table-column>
            <el-table-column prop="content" label="课程内容" width="200"></el-table-column>
            <el-table-column prop="teacher" label="讲师" width="100"></el-table-column>
            <el-table-column prop="remark" label="备注" width="120"></el-table-column>
            <el-table-column label="操作" align="center" fixed="right">
                <template scope="scope">
                    <el-button size="small" @click="edit(scope.row)">编辑</el-button>
                    <el-button type="danger" size="small" @click="del(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--工具条-->
        <el-col :span="24" class="toolbar">
            <el-button type="danger" :disabled="this.sels.length === 0" @click="delBatch">批量删除</el-button>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
                :page-sizes="[5, 10, 50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
                :total="totals" style="float:right;">
            </el-pagination>
        </el-col>

        <!--新增界面-->
        <el-dialog title="新增课表" :visible.sync="addFormVisible" :close-on-click-modal="false">
            <el-form :model="addForm" label-width="80px" ref="addForm">
                <el-form-item label="日期" prop="lectureTime">
                    <div class="block">
                        <el-date-picker v-model="addForm.lectureTime" type="date" placeholder="选择日期" format="yyyy/MM/dd"
                            value-format="yyyy/MM/dd">
                        </el-date-picker>
                    </div>
                </el-form-item>
                <el-form-item label="星期" prop="week">
                    <el-input v-model="addForm.week" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="课程内容" prop="content">
                    <el-input v-model="addForm.content" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="讲师" prop="teacher">
                    <el-input v-model="addForm.teacher" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-input v-model="addForm.remark" auto-complete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="addFormVisible = false">取消</el-button>
                <el-button type="primary" @click.native="addSubmit">提交</el-button>
            </div>
        </el-dialog>
    </section>
</template>

<script>

export default {
    data() {
        return {
            fileList: [],
            dialogFormVisible: false,
            form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            formLabelWidth: '120px',
            // 日期选择
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
            },
            roles: [],
            row: "",
            sels: [], //存储多选记录
            addFormVisible: false,
            addForm: {
                id: null,
                lectureTime: "",
                week: "",
                content: "",
                teacher: "",
                remark: "",
            },
            listLoading: false,
            //查询对象
            keyword: '',
            totals: 0,//总记录条数
            currentPage: 1,//当前页,要传递到后台的
            pageSize: 5, //每页显示多少条
            tableDatas: [], //当前页数据
            roleIds: null // 角色集合数据
        }
    },
    methods: {
        // 其他页面选择批量删除
        getRowKey(row) {
            return row.id;
        },
        handleChange(file, fileList) {
            this.fileList = fileList.slice(-3);
        },
        // 点击导出
        exportCourseFile() {
            this.$http.get("course/export").then((res) => {
                location.href = "http://127.0.0.1:8080/course/export";
            })
        },

        // 点击确定提交导入并刷新页面
        importSuccess() {
            this.dialogFormVisible = false;
            this.getTableData();
        },

        //表格多条数据选中事件
        handleSelectionChange(val) {
            /**
             * val中存放的是所有已选择的行数据集合
             */
            this.sels = [];
            if (val != null && val.length > 0) {
                for (var i = 0; i < val.length; i++) {
                    //往sels数组中存值
                    this.sels.push(val[i].id);
                }
            }
        },

        //提交新增表单数据
        addSubmit() {
            // 把前端的true/false转换为1/0传给后端
            this.addForm.state = this.addForm.state == true ? 1 : 0;
            // 新增			
            if (!this.addForm.id) {
                // 将前端的状态传递给后端
                this.$http.post("/course", this.addForm).then(result => {
                    if (result.data.success) {
                        this.$message({
                            message: result.data.msg,
                            type: 'success'
                        });
                        this.addFormVisible = false;
                        this.getTableData();
                    } else {
                        this.$message({
                            message: result.data.msg,
                            type: 'error'
                        });
                    }
                });
            } else { // 修改
                this.$http.put("/course", this.addForm).then(result => {
                    if (result.data.success) {
                        this.$message({
                            message: result.data.msg,
                            type: 'success'
                        });
                        this.addFormVisible = false;
                        this.getTableData();
                    } else {
                        this.$message({
                            message: result.data.msg,
                            type: 'error'
                        });
                    }
                });
            }
        },


        //点击编辑
        edit(row) {
            this.addFormVisible = true;//显示编辑框
            // 深拷贝：值赋值
            this.addForm = Object.assign({}, row);//回显数据
            // 浅拷贝：地址赋值
            // this.addForm = row;

            // 回显按钮状态
            this.addForm.state = this.addForm.state == 1 ? true : false;
        },
        //批量删除
        delBatch() {
            this.$confirm('确定删除这些数据吗？', '请确认', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$http.patch("/course/batchDel/", this.sels).then(result => {
                    if (result.data.success) {
                        this.$message({
                            type: 'success',
                            message: result.data.msg
                        });
                        this.getTableData();
                    } else {
                        this.$message({
                            type: 'error',
                            message: result.data.msg
                        });
                    }
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消操作'
                });
            });
        },

        //删除单条数据
        del(row) {
            this.$confirm('确定删除此条数据吗？', '请确认', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$http.delete("/course/" + row.id).then(result => {
                    if (result.data.success) {
                        this.$message({
                            type: 'success',
                            message: result.data.msg
                        });

                        // 计算页码值，解决删除一页最后一条数据时回到上一页
                        // 1.先计算出总页数
                        // let totalPage = Math.ceil(this.totals / this.PageSize);
                        // // 2.判断是否需要回到上一页
                        // // 	第一个条件判断当前是否在最后一页
                        // //  第二个条件判断总条数减去一条是否所在页为空
                        // if ((this.totals - 1) % this.PageSize == 0 && this.currentPage > 1) {
                        // 	this.currentPage = this.currentPage - 1;
                        // }
                        this.getTableData();
                    } else {
                        this.$message({
                            type: 'error',
                            message: result.data.msg
                        });
                    }
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消操作'
                });
            });
        },
        addHandler() {
            this.addForm = {
                id: null,
                lectureTime: "",
                week: "",
                content: "",
                teacher: "",
                remark: "",
            };
            this.addFormVisible = true;
        },
        //选择第几页时触发
        handleCurrentChange(curentPage) {
            this.currentPage = curentPage;
            this.getTableData();
        },
        //选择每页显示记录条数
        handleSizeChange(pageSize) {
            this.currentPage = 1;
            this.pageSize = pageSize;
            this.getTableData();
        },
        handleChange(value) {
            console.log(this.addForm.courseTypeId);
        },
        //获取列表数据
        getTableData() {
            let para = {
                "currentPage": this.currentPage,
                "pageSize": this.pageSize,
                "keyword": this.keyword
            };
            this.listLoading = true; //显示加载圈
            //分页查询
            this.$http.post("/course/page", para).then(result => {
                this.totals = result.data.data.total;
                this.tableDatas = result.data.data.list;
                this.listLoading = false;  //关闭加载圈
            });
        },

        // 获取角色集合数据
        getRoles() {
            // 分页查询
            this.$http.get("/role").then(result => {
                this.roles = result.data.data;
            });
        },
    },
    mounted() {
        this.getTableData();
        this.getRoles();
    }
}

</script>

<style scoped></style>
